<template>
  <view class="userSelf">
    <view class="top">
      <view class="group" @click="toUserInfo">
        <view class="userinfo">
          <view class="pic">
            <image :src="userInfo.avatar_file.url" mode="aspectFill"
              v-if="hasLogin && userInfo.avatar_file && userInfo.avatar_file.url"></image>
            <image v-else src="../../static/image/user-default.jpg" mode="aspectFill"></image>
          </view>
          <view class="text" v-if="hasLogin">
            <view class="nickname">{{userInfo.nickname || userInfo.username || userInfo.mobile}}</view>
            <view class="year">
              <uni-dateformat :date="new Date() - 360000" :threshold="[3600,99*365*24*60*60*1000]"></uni-dateformat>
              注册
            </view>
          </view>
          <view class="text" v-else>
            <view class="nickname">点击登录</view>
          </view>
        </view>

        <view class="more">
          <text class="iconfont icon-a-10-you"></text>
        </view>
      </view>

      <view class="bg">
        <image :src="userInfo.avatar_file.url" mode="aspectFill"
          v-if="hasLogin && userInfo.avatar_file && userInfo.avatar_file.url"></image>
        <image v-else src="../../static/image/user-default.jpg" mode="aspectFill"></image>
      </view>
    </view>

    <view class="main">
      <view class="info">
        <view class="item"><text>{{totalObj.likeNum?totalObj.likeNum:'0'}}</text>获赞</view>
        <view class="item"><text>{{totalObj.comment?totalObj.comment:'0'}}</text>评论</view>
        <view class="item"><text>{{totalObj.artNum?totalObj.artNum:'0'}}</text>发文</view>
      </view>

      <view class="list">
        <view class="group">
          <view class="item" @click="myArticle">
            <view class="left"><text class="iconfont icon-a-24-bianji"></text><text class="text">我的长文</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>
          <view class="item" @click="myLike">
            <view class="left"><text class="iconfont icon-a-106-xihuan"></text><text class="text">我的点赞</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>
          <view class="item" @click="myComment">
            <view class="left"><text class="iconfont icon-a-21-xiugai"></text><text class="text">评论过的</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>
        </view>

        <view class="group">
          <view class="item" @click="feedBack">
            <view class="left"><text class="iconfont icon-a-5-xinxi"></text><text class="text">意见反馈</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>
          <view class="item" @click="checkFeedBack" v-if="uniIDHasRole('pyq_administrator')">
            <view class="left"><text class="iconfont icon-a-5-xinxi"></text><text class="text">意见反馈列表</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>
          <view class="item" @click="aboutPro">
            <view class="left"><text class="iconfont icon-a-32-wenjian"></text><text class="text">关于</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>
        </view>

        <view class="group" v-if="hasLogin">
          <view class="item" @click="loginOut">
            <view class="left"><text class="iconfont icon-a-73-tuichu"></text><text class="text">退出登录</text></view>
            <view class="right"><text class="iconfont icon-a-10-you"></text></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    store,
    mutations
  } from "../../uni_modules/uni-id-pages/common/store.js"
  import {
    computed,
    reactive,
    toRefs
  } from "vue"
  import {
    goLoginPage
  } from '../../utils/tools.js'
  import {
    onShow
  } from '@dcloudio/uni-app'
  const db = uniCloud.database()
  export default {
    setup() {
      const userInfo = computed(() => {
        return store.userInfo
      })
      const hasLogin = computed(() => {
        return store.hasLogin
      })
      const data = reactive({
        totalObj: {
          artNum: 0,
          likeNum: 0,
          comment: 0
        }
      })
      //跳转到我的点赞
      const myLike = () => {
        console.log(store)
        if (store.hasLogin) {
          uni.navigateTo({
            url: "/pages/pyq_like/list"
          })
        } else {
          goLoginPage()
        }
      }
      // 跳转到我的点赞文章
      const myComment = () => {
        if (store.hasLogin) {
          uni.navigateTo({
            url: "/pages/pyq_comment/list"
          })
        } else {
          goLoginPage()
        }
      }
      // 意见反馈
      const feedBack = () => {
        if (store.hasLogin) {
          uni.navigateTo({
            url: "/uni_modules/uni-feedback/pages/opendb-feedback/opendb-feedback"
          })
        } else {
          goLoginPage()
        }
      }
      // 管理员查看意见反馈列表
      const checkFeedBack = () => {
        uni.navigateTo({
          url: "/uni_modules/uni-feedback/pages/opendb-feedback/list"
        })
      }
      // 跳转到我的长文
      const myArticle = () => {
        if (store.hasLogin) {
          uni.navigateTo({
            url: "/pages/pyq_article/list"
          })
        } else {
          goLoginPage()
        }
      }
      // 退出登录
      const loginOut = () => {
        uni.showModal({
          title: "是否确认退出？",
          success: (res) => {
            if (res.confirm) {
              mutations.logout()
              data.totalObj.artNum = 0
              data.totalObj.likeNum = 0
              data.totalObj.comment = 0
            }
          }
        })
      }
      // 点击登录Or个人资料
      const toUserInfo = () => {
        if (store.hasLogin) {
          uni.navigateTo({
            url: "/uni_modules/uni-id-pages/pages/userinfo/userinfo"
          })
        } else {
          uni.navigateTo({
            url: "/uni_modules/uni-id-pages/pages/login/login-withpwd"
          })
        }
      }
      // 关于
      const aboutPro = () => {
        uni.showToast({
          title: "本项目由：uni-app + uniCloud联合开发",
          icon: "none",
          duration: 3000
        })
      }
      const getAllTatal = async () => {

        try {
          let artTotal = await db.collection("pyq_article").where(`user_id == $cloudEnv_uid && delState != true`)
            .count()
          data.totalObj.artNum = artTotal.result.total
          let likeTotal = await db.collection("pyq_article").where(`user_id == $cloudEnv_uid && delState != true`)
            .groupBy('user_id').groupField('sum(like_count) as likeTotal').get()
          data.totalObj.likeNum = likeTotal.result.data[0].likeTotal
          let comment = await db.collection("pyq_comment").where(
              `user_id == $cloudEnv_uid && comment_state == true`)
            .count()
          data.totalObj.comment = comment.result.total

        } catch (err) {

        }
      }
      onShow(() => {
        getAllTatal()
      })

      return {
        userInfo,
        hasLogin,
        loginOut,
        toUserInfo,
        myArticle,
        myLike,
        feedBack,
        checkFeedBack,
        ...toRefs(data),
        myComment,
        aboutPro
      }
    }
  }
</script>

<style lang="scss">
  .userSelf {

    .top {
      height: 300rpx;
      background: #bbb;
      padding: 0 30rpx;
      padding-top: var(--status-bar-height);
      position: relative;
      display: flex;
      align-items: center;

      .group {
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        color: #fff;

        .userinfo {
          display: flex;
          width: 100%;
          align-items: center;

          .pic {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid #fff;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .text {
            padding-left: 20rpx;

            .nickname {
              font-size: 44rpx;
              font-weight: 600;
            }

            .year {
              font-size: 26rpx;
              opacity: 0.6;
              padding-top: 5rpx;
            }
          }
        }

        .more {
          .iconfont {
            font-size: 40rpx;
          }
        }
      }

      .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
          filter: blur(20px);
          transform: scale(2);
          opacity: 0.5;
        }
      }
    }

    .main {
      width: 100%;
      min-height: 200rpx;
      background: #fff;
      border-radius: 30rpx;
      transform: translateY(-30rpx);
      padding: 30rpx 0;

      .info {
        padding: 10rpx 30rpx;
        display: flex;
        font-size: 30rpx;

        .item {
          padding-right: 20rpx;
          color: #888;

          text {
            font-weight: 600;
            color: #333;
          }
        }
      }

      .list {
        .group {
          padding: 15rpx 30rpx;
          border-bottom: 15rpx solid #f4f4f4;

          .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25rpx 0;
            font-size: 32rpx;
            color: #555;
            border-bottom: 1rpx solid #f8f8f8;

            .left {
              display: flex;
              align-items: center;

              .iconfont {
                font-size: 38rpx;
                margin-right: 10rpx;
              }
            }

            .right {
              .iconfont {
                font-size: 26rpx;
              }
            }
          }

          .item:last-child {
            border: none;
          }
        }

        .group:last-child {
          border: none;
        }
      }
    }
  }
</style>